﻿@model SrBBSPro.Entities.BugAnalysis
@{
    ViewBag.Title = "障害统计图表";
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>障害统计图表</title>
    <link href="~/Content/css/layui.css" rel="stylesheet" />
    <script src="~/Content/jquery-3.4.1.min.js"></script>
    <script src="~/Content/highcharts.js"></script>
    <script src="~/Content/layui.js"></script>
</head>
<body>
    <div class="main layui-clear">
        <div class="layui-tab" style="width: 900px; height: 500px; margin: 0 auto">
            <ul class="layui-tab-title">
                <li class="layui-this">统计表</li>
                <li>统计图</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form layui-form-pane">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">阶段</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" readonly="readonly" value="移行测试" />
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">标准</label>
                                <div class="layui-input-block" style="width:60px">
                                    <input id="standard" class="layui-input" readonly="readonly" value="0.5" />
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    KL
                                </div>
                            </div>
                        </div>
                    </div>
                    <table id="chart" lay-filter="chart"></table>
                </div>
                <div class="layui-tab-item" id="container"></div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    layui.use(['element', 'table', 'layer'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var standard = $("#standard").val();
        var kind = '@Model.Kind';
        var pro = '@Model.Pro';
        var dic;
        var height = 450;
        if (kind === "CodeQuality" || kind === "TestQuality" || kind === "SysQuality") {
            height = 400;
            $(".layui-form").css("display", "block");
        } else {
            $(".layui-form").css("display", "none");
        }
        table.render({
            elem: '#chart'
            , height: height
            , title: '项目障害一览'
            , url: '/Project/AnalysisData?id='+'@Model.Id'+'&kind='+kind+'&pro='+pro
            , autoSort: false
            , toolbar: false
            , totalRow: true
            , cols: getCols(kind, standard)
            , done: function (res) {
                var divArr = $(".layui-table-total div.layui-table-cell");
                $.each(divArr, function (index, item) {
                    var div = $(item);
                    div.html(div.html().replace(".00", ""));
                });
                if (kind === "EveryDay") {
                    var hap = parseFloat($('.layui-table-total table td:eq(-3) div').html());
                    var rev = parseFloat($('.layui-table-total table td:eq(-2) div').html());
                    $('.layui-table-total table td:last div').html(hap-rev);
                } else if (kind === "BugManager") {
                    var hap = parseFloat($('.layui-table-total table td:eq(5) div').html());
                    var rev = parseFloat($('.layui-table-total table td:eq(6) div').html());
                    $('.layui-table-total table td:eq(7) div').html(hap - rev);
                }
                setCharts(res.data, kind);
            }
        });
    });

    function setCharts(data, kind) {
        var xAxis = {};
        var yAxis = {};
        var plotOptions = {};
        var series;
        var json = {};
        var credits = {
            enabled: false
        };
        if (kind === "EveryDay") {
            xAxis = {
                categories: new Array(),
                crosshair: true
            };
            yAxis = {
                title: {
                    text: ''
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            };
            var legend = {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            };
            json.legend = legend;
            series = [
                {
                    name: '发生件数',
                    data: new Array()
                },
                {
                    name: '修正件数',
                    color: '#C35E5C',
                    data: new Array()
                }
            ];
            $(data).each(function (index, element) {
                xAxis.categories.push(element.BugDay);
                series[0].data.push(element.Happens);
                series[1].data.push(element.Revises);
            });
            json.xAxis = xAxis;
            json.yAxis = yAxis;
        } else if (kind === "Reviser") {
            xAxis = {
                categories: new Array(),
                crosshair: true
            };
            yAxis = {
                min: 0,
                title: {
                    text: '未修正件数'
                }
            };
            plotOptions = {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            };
            series = [{
                name: '修正人员',
                data: new Array()
            }];
            var tooltip = {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            };
            $(data).each(function (index, element) {
                xAxis.categories.push(element.ReviserName);
                series[0].data.push(element.NoConfirms);
            });
            json.chart = { type: 'column' };
            json.tooltip = tooltip;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
        } else if (kind === "BookDay") {
            xAxis = {
                categories: new Array(),
                crosshair: true
            };
            yAxis = {
                title: {
                    text: ''
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            };
            var legend = {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            };
            json.legend = legend;
            series = [
                {
                    name: '预定修正件数',
                    data: new Array()
                },
                {
                    name: '修正完了件数',
                    color: '#C35E5C',
                    data: new Array()
                }
            ];
            $(data).each(function (index, element) {
                xAxis.categories.push(element.BookEndDate);
                series[0].data.push(element.Publishs);
                series[1].data.push(element.Confirms);
            });
            json.xAxis = xAxis;
            json.yAxis = yAxis;
        } else if (kind === "Tester") {
             xAxis = {
                categories: new Array(),
                crosshair: true
            };
            yAxis = {
                min: 0,
                title: {
                    text: '未确认件数'
                }
            };
            plotOptions = {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            };
            var tooltip = {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            };
            series = [{
                name: '测试人员',
                data: new Array()
            }];

            $(data).each(function(index, element) {
                xAxis.categories.push(element.TesterName);
                series[0].data.push(element.NoConfirms);
            });
            json.chart = { type: 'column' };
            json.tooltip = tooltip;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
        } else if (kind === "BugManager") {
            $('#container').text("该表格没有图");
            return;
        } else if (kind === "ReasonSmall" || kind === "ReasonBig" || kind === "Scence") {
            plotOptions = {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
                        enabled: true,
                    }
                }
            };
            json.chart = {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            };

            series = [{
                type: 'pie',
                name: '障害个数',
                data: new Array()
            }];
            var divArr = $(".layui-table-total div.layui-table-cell");
            $.each(divArr, function (index, item) {
                if (index > 2) {
                    var tr = parseInt($(item).html());
                    if (tr > 0) {
                        var num = index - 3;
                        if (num < 10) {
                            num = "0" + num;
                        }
                        series[0].data.push([dic[num],tr]);
                    }
                }
            });
        } else if (kind === "CodeQuality" || kind === "TestQuality" || kind === "SysQuality") {
            xAxis = {
                categories: new Array(),
                crosshair: true
            };
            yAxis = {
                min: 0,
                title: {
                    text: ''
                }
            };
            plotOptions = {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            };
            series = [{
                name: '密度',
                data: new Array()
            }];

            var tooltip = {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.2f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            };

            $(data).each(function (index, element) {
                xAxis.categories.push(element.Tname);
                series[0].data.push(parseFloat(element.Density));
            });
            json.chart = { type: 'column' };
            json.tooltip = tooltip;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
        }
        json.title = { text: "@Model.KindName" };
        json.plotOptions = plotOptions;
        json.credits = credits;
        json.plotOptions = plotOptions;
        json.series = series;
        $('#container').highcharts(json);
    }

    function getCols(kind, standard) {
        var col = [[]];
        switch (kind) {
            case "EveryDay":
                col[0].push({ type: 'numbers'})
                col[0].push({ field: 'BugDay', title: '日期', width: 120, totalRow: '合计' });
                col[0].push({ field: 'Happens', title: '发生件数', width: 120, totalRow: true });
                col[0].push({ field: 'Revises', title: '修正件数', width: 120, totalRow: true});
                col[0].push({ field: 'Lasts', title: '剩余件数', width: 120, totalRow: true, templet: '<div>{{d.Happens-d.Revises}}</div>',});
                break;
            case "Reviser":
                col[0].push({ type: 'numbers' })
                col[0].push({ field: 'Reviser', hide: true });
                col[0].push({ field: 'ReviserName', title: '预定修正者', width: 120, totalRow: '合计' });
                col[0].push({ field: 'Publishs', title: '预定件数', width: 120, totalRow: true });
                col[0].push({ field: 'Confirms', title: '修正完了件数', width: 120, totalRow: true });
                col[0].push({ field: 'NoConfirms', title: '未修正件数', width: 120, totalRow: true });
                break;
            case "BookDay":
                col[0].push({ type: 'numbers' })
                col[0].push({ field: 'BookEndDate', title: '预定日期', width: 120, totalRow: '合计' });
                col[0].push({ field: 'Publishs', title: '预定修正件数', width: 120, totalRow: true });
                col[0].push({ field: 'Confirms', title: '修正完了件数', width: 120, totalRow: true });
                col[0].push({ field: 'NoConfirms', title: '未修正件数', width: 120, totalRow: true });
                break;
            case "Tester":
                col[0].push({ type: 'numbers' })
                col[0].push({ field: 'Tester', hide: true});
                col[0].push({ field: 'TesterName', title: '测试担当', width: 120, totalRow: '合计' });
                col[0].push({ field: 'Publishs', title: '起票件数', width: 120, totalRow: true });
                col[0].push({ field: 'Revises', title: '修正完了件数', width: 120, totalRow: true });
                col[0].push({ field: 'Confirms', title: '确认完了件数', width: 120, totalRow: true });
                col[0].push({ field: 'NoConfirms', title: '未确认件数', width: 120, totalRow: true});
                break;
                break;
            case "BugManager":
                col[0].push({ type: 'numbers' })
                col[0].push({ field: 'PageId', title: '机能ID', width: 150, totalRow: false });
                col[0].push({ field: 'PageName', title: '机能名称', width: 200, totalRow: false });
                col[0].push({ field: 'DeveloperName', title: '开发担当', width: 90, totalRow: '合计' });
                col[0].push({ field: 'TesterName', title: '测试担当', width: 90, totalRow: false });
                col[0].push({ field: 'Publishs', title: '起票件数', width: 110, totalRow: true });
                col[0].push({ field: 'Confirms', title: '确认完了件数', width: 120, totalRow: true });
                col[0].push({ field: 'Lave', title: '剩余件数', width: 110, templet: '<div>{{d.Publishs-d.Confirms}}</div>', totalRow: true });
                col[0].push({ field: 'NoConfirms', title: '未确认件数', width: 110, totalRow: true });
                col[0].push({ field: 'Bugs', title: '障害件数', width: 110, totalRow: true });
                //col[0].push({ field: 'Status', title: '状态', width: 120, totalRow: true });
                break;
            case "ReasonSmall":
                var str = '@(Newtonsoft.Json.JsonConvert.SerializeObject(Model.ReasonSmall))'.replace(/&quot;/g, "\"");
                dic = JSON.parse(str)
                col[0].push({ type: 'numbers', fixed: 'left'})
                col[0].push({ field: 'PageId', title: '机能ID', width: 150, totalRow: false, fixed: 'left' });
                col[0].push({ field: 'PageName', title: '机能名称', width: 200, totalRow: '合计', fixed: 'left' });
                for (var num = 0; num <= 20; num++) {
                    col[0].push({ field: 'small' + num, title: dic[num], width: 120, totalRow: true });
                }
                break;
            case "ReasonBig":
                var str = '@(Newtonsoft.Json.JsonConvert.SerializeObject(Model.ReasonBig))'.replace(/&quot;/g, "\"");
                dic = JSON.parse(str)
                col[0].push({ type: 'numbers', fixed: 'left' })
                col[0].push({ field: 'PageId', title: '机能ID', width: 150, totalRow: false, fixed: 'left' });
                col[0].push({ field: 'PageName', title: '机能名称', width: 200, totalRow: '合计', fixed: 'left' });
                for (var num = 0; num <= 18; num++) {
                    col[0].push({ field: 'big' + num, title: dic[num], width: 120, totalRow: true });
                }
                break;
            case "Scence":
                var str = '@(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Scene))'.replace(/&quot;/g, "\"");
                dic = JSON.parse(str)
                col[0].push({ type: 'numbers', fixed: 'left' })
                col[0].push({ field: 'PageId', title: '机能ID', width: 150, totalRow: false, fixed: 'left' });
                col[0].push({ field: 'PageName', title: '机能名称', width: 200, totalRow: '合计', fixed: 'left' });
                for (var num = 0; num <= 12; num++) {
                    col[0].push({ field: 'scene' + num, title: dic[num], width: 120, totalRow: true });
                }
                break;
            case "CodeQuality":
            case "TestQuality":
            case "SysQuality":
                if (kind === "SysQuality") {
                    col[0].push({ field: 'Tname', title: '机能ID', width: 150, totalRow: '合计' });
                } else {
                    col[0].push({ field: 'Tname', title: '担当', width: 80, totalRow: '合计' });
                }
                col[0].push({ field: 'Scale',title: '规模 KL', width: 120, totalRow: true });
                col[0].push({ field: 'Num',title: '障害数', width: 120, totalRow: true});
                col[0].push({ field: 'Density', title: '密度', width: 100, totalRow: false });
                col[0].push({
                    title: '评价', width: 60, totalRow: false, templet: function (d) {
                        if (parseFloat(d.Density) < parseFloat(standard) * 0.7) {
                            return '<span style="font-size:18px">▲</span>';
                        } else if (parseFloat(d.Density) > parseFloat(standard) * 1.3) {
                            return '<span style="font-size:18px">▲</sapn>';
                        } else {
                            return '<span style="font-size:24px">●</span>';
                        }
                    }});
                break;
        }
        return col;
    }

</script>